<template>
	<li class="el-menu-item-group">
		<div class="el-menu-item-group__title" :style="{ paddingLeft: levelPadding + 'px' }">
			<template v-if="!$slots.title">{{ title }}</template>
			<slot v-else name="title"></slot>
		</div>
		<ul>
			<slot></slot>
		</ul>
	</li>
</template>
<script lang="ts">
export default async function () {
	return defineComponent({
		name: "ElMenuItemGroup",

		componentName: "ElMenuItemGroup",

		inject: ["rootMenu"],
		props: {
			title: {
				type: String
			}
		},
		data() {
			return {
				paddingLeft: 20
			};
		},
		computed: {
			levelPadding() {
				let padding = 20;
				let parent = this.$parent;
				if (this.rootMenu.collapse) return 20;
				while (parent && parent.$options.componentName !== "ElMenu") {
					if (parent.$options.componentName === "ElSubmenu") {
						padding += 20;
					}
					parent = parent.$parent;
				}
				return padding;
			}
		}
	});
}
</script>
